import { faqs, faqCategories } from './data';
import CategorizedFaqs from '../components/CategorizedFaqs';

export const metadata = {
  title: '常见问题 | 余莉莎',
  description: '余莉莎的服务常见问题解答，涵盖服务咨询、技术问题、合作方式、收费标准等方面',
};

export default function FaqPage() {
  return (
    <div className="min-h-screen py-16">
      <div className="container mx-auto px-4">
        <h1 className="text-4xl font-bold text-primary-600 mb-2 text-center">常见问题解答</h1>
        <p className="text-xl text-gray-600 mb-12 text-center max-w-3xl mx-auto">
          以下是客户经常咨询的问题及详细解答，希望能帮助您更好地了解我的服务
        </p>

        <div className="max-w-3xl mx-auto">
          {/* 使用客户端组件处理筛选逻辑 */}
          <CategorizedFaqs faqs={faqs} categories={faqCategories} />
        </div>
        
        {/* 联系提示 */}
        <div className="max-w-3xl mx-auto mt-16 bg-primary-50 rounded-lg p-6 border border-primary-100">
          <h2 className="text-xl font-semibold text-primary-700 mb-3">还有其他问题？</h2>
          <p className="text-gray-700 mb-4">
            如果您没有在上面找到您想要的答案，或者需要更详细的信息，请随时与我联系。
            我很乐意回答您的任何问题，并提供个性化的解答。
          </p>
          <a 
            href="/#contact" 
            className="inline-block btn-primary"
          >
            联系我
          </a>
        </div>
      </div>
    </div>
  );
} 